let createCourseWrapOneStep = () => {
    let div = document.createElement('div')
    div.className = 'class-wrap'
    div.innerHTML = `
        <div class='order-class-one-step-wrap'>
            <div class='order-class-one-step-wrap-top'>怎么预约课程?</div>
            <div class='order-class-one-step-wrap-bottom'>
                <div class='order-class-one-step-wrap-bottom-left'>
                    <div class='order-class-one-step-wrap-bottom'>
                        <div class='order-class-one-step-wrap-bottom-left-wrap'>
                            <div style='font-weight:bold;margin-top:16px'>定期</div>
                            <div style='color:#8C9195;margin-top:8px;margin-bottom:23px'>养成到点上课的习惯</div>
                            <div style='display:flex;align-items:center;margin-top:23px'>
                                <div style="font-family:'Wingdings 2';color:#5686E9">√</div>
                                <div style='margin-left:4px;font-weight: 400;'>预定你的理想时间</div>
                            </div>
                            <div style='display:flex;align-items:center;margin-top:22px'>
                                <div style="font-family:'Wingdings 2';color:#5686E9">√</div>
                                <div style='margin-left:4px;font-weight: 400;'>建立持续的学习计划</div>
                            </div>
                            <div style='display:flex;align-items:center;margin-top:22px'>
                                <div style="font-family:'Wingdings 2';color:#5686E9">√</div>
                                <div style='margin-left:4px;font-weight: 400;'>随时变更</div>
                            </div>      
                        </div>
                        <div class='order-class-one-step-wrap-bottom-right-wrap'>
                            <svg style="width: 50px;height:56px;margin-top:16px" aria-hidden="true">
                                <use xlink:href="#icon-dingqijiancha"></use>
                            </svg>
                        </div>
                    </div>
                    <div class='order-class-one-step-regular'>定期预约</div>
                </div>
                <div class='order-class-one-step-wrap-bottom-left'>
                    <div class='order-class-one-step-wrap-bottom'>
                        <div class='order-class-one-step-wrap-bottom-left-wrap'>
                            <div style='font-weight:bold;margin-top:16px'>单次</div>
                            <div style='color:#8C9195;margin-top:8px;margin-bottom:23px'>每次时间不定</div>
                            <div style='display:flex;align-items:center;margin-top:23px'>
                                <div style="font-family:'Wingdings 2';color:#E3E5E8">×</div>
                                <div style='margin-left:4px;font-weight: 400;text-decoration: line-through;color: #E3E5E8;'>预定你的理想时间</div>
                            </div>
                            <div style='display:flex;align-items:center;margin-top:22px'>
                                <div style="font-family:'Wingdings 2';color:#E3E5E8">×</div>
                                <div style='margin-left:4px;font-weight: 400;text-decoration: line-through;color: #E3E5E8;'>建立持续的学习计划</div>
                            </div>
                            <div style='display:flex;align-items:center;margin-top:22px'>
                                <div style="font-family:'Wingdings 2';color:#5686E9">√</div>
                                <div style='margin-left:4px;font-weight: 400;'>随时变更</div>
                            </div>      
                        </div>
                        <div class='order-class-one-step-wrap-bottom-right-wrap'>
                            <svg style="width: 50px;height:56px;margin-top:16px" aria-hidden="true">
                                <use xlink:href="#icon-genjincishu"></use>
                            </svg>
                        </div>
                    </div>
                    <div class='order-class-one-step-regular'>单次预约</div>
                </div>
            </div>
        </div>
    `
    document.body.appendChild(div)

    //定期预约
    $('.order-class-one-step-regular')[0].addEventListener('click',() => {
        $('.class-wrap')[0].remove()
        createCourseWrapPublicStep()
        createCourseWrapSecondStep('regular')
    })


    //单次预约
    $('.order-class-one-step-regular')[1].addEventListener('click',() => {
        $('.class-wrap')[0].remove()
        createCourseWrapPublicStep()
        createCourseWrapSecondStep('one')
    })
}

let createCourseWrapPublicStep = () => {
    let div = document.createElement('div')
    div.className = 'class-wrap'
    div.innerHTML = `
        <div class='class-wrap-public' style='margin:52px auto;width:1200px;display: flex'>
            <div class='order-class-second-wrap-left'>
                <div style='margin-top:12px'>
                    <img src='/static/anquan.png' width='59' height='59'/>
                </div>
                <div style='margin-top:12px'>你与张老师还有</div>
                <div style='font-size:18px;margin-top:26px'>6节课</div>
                <div style='margin-top:19px'>课时50分钟</div>
                <div style='margin-top:19px;color:#C3C3C3;font-size:10px'>课程开始12个小时以前你可以变更或者取消</div>
                <div style='display:flex;align-items:center;margin-top:7px;margin-bottom:14px'>
                    <svg style="width: 24px;height:16px;" aria-hidden="true">
                        <use xlink:href="#icon-dengluguge"></use>
                    </svg>
                    <span style='font-size:10px;color:#5686E9;'>谷歌日历</span>
                </div>
            </div>
        </div>
    `
    document.body.appendChild(div)
}

let createCourseWrapSecondStep = (type = 'regular') => {
    let wrap_right = document.createElement('div')
    wrap_right.className = 'order-class-second-wrap-right'
    wrap_right.innerHTML = `
        <div class='order-class-second-wrap-right-top'>
            <div class='order ${type === 'one' ? 'order-active' : 'order-deactive'}'>
                <span>单次预约</span>
                <i class='iconfont icon-danyilaiyuan' style='color:#3493FB;font-size:26px;margin-left:12px'></i>
            </div>
            <div class='order ${type === 'regular' ? 'order-active' : 'order-deactive'}'>
                <span>定期预约</span>
                <i class='iconfont icon-wuxian' style='color:#3493FB;font-size:26px;margin-left:12px'></i>
            </div>
        </div>
        <div class='order-class-second-wrap-right-component'>
        
        </div>
    `
    $('.class-wrap-public')[0].appendChild(wrap_right)

    //继续
    let continue_btn = document.createElement('div')
    continue_btn.className = 'bottom-continue'
    continue_btn.innerHTML = `继续`
    document.body.appendChild(continue_btn)


    let createOneOrder = () => {
        let component_wrap = $('.order-class-second-wrap-right-component')[0]
        component_wrap.innerHTML = `
            <div class='order-class-second-wrap-right-second-left'>
                <div class='title-allow'>
                    <div class='allow-left'>
                        <i class='iconfont icon-banner-left-bolder'></i>
                    </div>
                    <div class='allow-right'>
                        <i class='iconfont icon-zuoyoujiantou'></i>
                    </div>
                </div>
                <div class='title-date'>6月23号-29号，2021</div>
                <div style='margin-right: 44px;'>日历是在你的时区${Intl.DateTimeFormat().resolvedOptions().timeZone}  ${new Date().getHours()}:${new Date().getMinutes()}</div>
            </div>
            <div class='order-class-second-wrap-right-time'></div>
        `
        let createTimeList = (weekday) => {
            let div = document.createElement('div')
            div.className = 'order-class-second-wrap-right-time-list'
            div.innerHTML = `
                <div>${weekday}</div>
                <div class='li' style='margin-top:18px'>07:00</div>
                <div class='li' style='margin-top:18px'>08:00</div>
            `
            $('.order-class-second-wrap-right-time')[0].appendChild(div)
        }

        for(let i=1;i<8;i++){
            createTimeList(`${22+i}号`)
        }
    }

    //create regular order
    let createRegularOrder = () => {
        let component_wrap = $('.order-class-second-wrap-right-component')[0]
        component_wrap.innerHTML = `
            <div class='order-class-second-wrap-right-second-right'>
                日历是在你的时区${Intl.DateTimeFormat().resolvedOptions().timeZone}  ${new Date().getHours()}:${new Date().getMinutes()}
            </div>
            <div class='order-class-second-wrap-right-time'></div>
        `
        let createTimeList = (weekday) => {
            let div = document.createElement('div')
            div.className = 'order-class-second-wrap-right-time-list'
            div.innerHTML = `
                <div>${weekday}</div>
                <div class='li' style='margin-top:18px'>07:00</div>
                <div class='li' style='margin-top:18px'>08:00</div>
            `
            $('.order-class-second-wrap-right-time')[0].appendChild(div)
        }

        for(let i=1;i<8;i++){
            createTimeList(`星期${i}`)
        }
    }

    if(type === 'regular'){
        createRegularOrder()
    }else{
        createOneOrder()
    }
    
    $('.order')[0].addEventListener('click',(e) => {
        if($(e.target)[0].className.includes('order')){
            e.target.className = 'order order-active'
        }else{
            $(e.target).parents('div.order')[0].className = 'order order-active'
        }
        
        $('.order')[1].className = 'order order-deactive'
        createOneOrder()
    })

    $('.order')[1].addEventListener('click',(e) => {
        if($(e.target)[0].className.includes('order')){
            e.target.className = 'order order-active'
        }else{
            $(e.target).parents('div.order')[0].className = 'order order-active'
        }
        $('.order')[0].className = 'order order-deactive'
        createRegularOrder()
    })

    $('.bottom-continue')[0].addEventListener('click',(e) => {
        $('.order-class-second-wrap-right')[0].remove()
        $(e.target).remove()
        createCourseWrapThirdStep()
    })

    $('.allow-left')[0].addEventListener('click',() => {

    })

    $('.allow-right')[0].addEventListener('click',() => {
        
    })
}

let createCourseWrapThirdStep = () => {
    let div = document.createElement('div')
    div.className = 'order-class-third-wrap-right'
    div.innerHTML = `
        <div class='title-ensure-time'>确认课程时间</div>
        <div class='list-wrap'>

        </div>
        <div class='order-btn'>
            <div class='btn-complete-order'>完成预约</div>
            <div class='btn-more-classic'>继续预约更多课程</div>
        </div>
    `
    $('.class-wrap')[0].children[0].appendChild(div)
    
    let createList = () => {
        let list = document.createElement('div')
        list.className = 'course-time-list'
        list.innerHTML = `
            <div class='course-time-list-time'>
                <div class='course-time-list-time-left'>
                    <svg style="width: 16px;height:18px;" aria-hidden="true">
                        <use xlink:href="#icon-anquan3"></use>
                    </svg>
                    <div style='color:#797C7D;margin-left:6px'>6月23号-星期三，11:00-11:50</div>
                </div>
                <i class='iconfont icon-chahao' style='color:#AEB5BC;font-size:13px;margin-right:21px'></i>
            </div>
            <div class='course-time-list-detail'>
                <div class='detail-hours-change'>
                    <div class='detail-name'>Hours charged</div>
                    <div class='detail-information'>1hour</div>
                </div>
                <div class='detail-hours-change'>
                    <div class='detail-name'>Hours left</div>
                    <div class='detail-information'>5hours</div>
                </div>
                <div class='detail-hours-change'>
                    <div class='detail-name'>Lesson cancellation</div>
                    <div class='detail-information'>
                        <div style='color:#31BC69'>Free</div>
                        <div>Note if you cancal your lesson less than 4 hours befoce the start,</div>
                        <div>your tutce may charge full lasson pnce</div>
                    </div>
                </div>
            </div>
        `
        $('.list-wrap')[0].appendChild(list)
    }

    createList()

    $('.btn-complete-order')[0].addEventListener('click',() => {
        $('.order-class-third-wrap-right')[0].remove()
        createCourseWrapFourStep()
    })

    $('.btn-more-classic')[0].addEventListener('click',() => {
        $('.order-class-third-wrap-right')[0].remove()
        createCourseWrapSecondStep('one')
    })

}

let createCourseWrapFourStep = () => {
    let div = document.createElement('div')
    div.className = 'order-class-four-wrap-right'
    div.innerHTML = `
        <div class='title-ensure-time'>课程安排</div>
        <div style='margin-left: 60px;'>每个星期三上午10：00-11:00都约上怎么样？</div>
        <div class='plan-information'>
            <div class='plan-information-list'>
                <i class='iconfont icon-queren' style='color:#C9C9C9;font-size:16px;margin-top: 2px;'></i>
                <span style='margin-left:10px;color:#797C7D;'>随时可以变更</span>
            </div>
            <div class='plan-information-list'>
                <i class='iconfont icon-fasong' style='color:#C9C9C9;font-size:16px;margin-top: 2px;'></i>
                <span style='margin-left:10px;color:#797C7D;'>一次约好，节省时间</span>
            </div>
            <div class='plan-information-list'>
                <div style='width:13px;height:13px;background:#5686E9;margin-top: 3px;'>
                    <i class='iconfont icon-tick' style='color:#FFFFFF;font-size:9px;'></i>
                </div>
                <div style='margin-left:10px;color:#797C7D;display:flex;flex-direction:column'>
                    <div>为了保证每个星期都能上课，当课程快上完时，我授权Chinese Lessons Online（CLO） 从我的卡中扣款购买课程。</div>
                    <div style='display:flex;align-items:center;height: 20px;background: #EDEFF0;border-radius: 6px;margin-top:6px;width: 100px;'>
                        <svg style="width: 24px;height:16px;margin-left:9px;margin-top:2px;margin-bottom:2px" aria-hidden="true">
                            <use xlink:href="#icon-visa"></use>
                        </svg>
                        <span style='color:#8A8A8A;margin-left:7px'>***</span>
                        <span style='color:#8A8A8A;margin-left:4px'>009</span>
                    </div>
                </div>
            </div>
        </div>
        <div class='order-btn'>
            <div class='btn-complete-order'>定期预约</div>
            <div class='btn-more-classic'>跳过</div>
        </div>
    `
    $('.class-wrap')[0].children[0].appendChild(div)

    $('.btn-complete-order')[0].addEventListener('click',() => {
        $('.order-class-four-wrap-right')[0].remove()
        createCourseWrapSecondStep('regular')
    })
}


export {
    createCourseWrapOneStep
}